<template>
  <el-col class="app-v-center app-column app-flex-1" style="overflow-y: auto">
    <el-row
      class="app-h-56px app-fill-width app-h-end app-v-center px-4 app-bb-1px-l2"
      :gutter="10"
    >
      <el-button type="primary" @click="addCompetition()">添加比赛</el-button>
    </el-row>
    <el-table
      :data="dataList"
      class="app-flex-1"
      style="width: 100%; overflow-y: auto"
    >
      <el-table-column prop="name" align="center" label="比赛名称" />
      <el-table-column prop="beginTime" align="center" label="开始时间">
        <template slot-scope="scope">
          {{ scope.row.beginTime && scope.row.beginTime.replace('T',' ') }}
        </template>
      </el-table-column>
      <el-table-column prop="action" align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="error"
            @click="editCompetition(scope.row)"
          >修改</el-button>
          <el-button
            size="small"
            type="warning"
            @click="deleteCompetition(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="mb-10 mt-5"
      style="max-width: 100vw"
      background
      :current-page.sync="pageNo"
      :page-sizes="[10, 20, 50]"
      :page-size.sync="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="getDataList"
      @current-change="getDataList"
    />

    <el-dialog
      :title="isEdit ? '编辑比赛' : '添加比赛'"
      :visible.sync="showCompetitionDialog"
      width="800px"
    >
      <el-form
        ref="competitionForm"
        :model="competitionInfo"
        :rules="rules"
        label-width="120px"
        class="app-flex-1"
      >
        <el-form-item label="比赛名称" prop="name">
          <el-input v-model="competitionInfo.name" placeholder="请输入比赛名称" />
        </el-form-item>
        <el-form-item label="开始时间" prop="name">
          <el-date-picker
            v-model="competitionInfo.beginTime"
            type="datetime"
            value-format="yyyy-MM-ddTHH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择比赛开始时间"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer app-h-end">
        <el-button @click="showCompetitionDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitCompetitionInfo">确认</el-button>
      </div>
    </el-dialog>
  </el-col>
</template>

<script>
import { getCompetitionList, addCompetition, deleteCompetition } from '@/api/user'
import { host } from '@/utils/request'
export default {
  data: () => ({
    host,
    rules: {
      name: [{ required: true, message: '请输入名字', trigger: 'blur' }]
    },
    isEdit: false,
    showCompetitionDialog: false,
    competitionInfo: {
      name: '',
      beginTime: ''
    },
    dataList: [],
    type: undefined,
    pageNo: 1,
    pageSize: 10,
    total: 0
  }),
  mounted() {
    this.getDataList()
  },
  methods: {
    addCompetition() {
      this.isEdit = false
      this.competitionInfo = {
        name: ''
      }
      this.showCompetitionDialog = true
      this.$nextTick(() => {
        this.$refs.competitionForm.clearValidate()
      })
    },
    editCompetition(item) {
      this.isEdit = true
      this.competitionInfo = { ...item }
      this.showCompetitionDialog = true
      this.$nextTick(() => {
        this.$refs.competitionForm.clearValidate()
      })
    },
    deleteCompetition(item) {
      this.$confirm(`确认删除赛事： ${item.name}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCompetition(item.id).then((res) => {
          if (res.code === 200) {
            this.getDataList()
            this.$message.success('删除成功')
          }
        })
      }).catch(() => {
      })
    },
    submitCompetitionInfo() {
      addCompetition(this.competitionInfo).then((res) => {
        if (res.code === 200) {
          if (this.competitionInfo.id) {
            this.$message.success('修改成功')
          } else {
            this.$message.success('添加成功')
          }
          this.showCompetitionDialog = false
          this.pageNo = 1
          this.getDataList()
        }
      })
    },
    getDataList() {
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        name: this.searchText
      }
      getCompetitionList(params).then((res) => {
        if (res.code === 200) {
          this.dataList = res.data.dataList
          this.total = res.data.total
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.avatar-uploader {
  width: 80px;
  height: 80px;
}
.bg-uploader {
  width: 160px;
  height: 160px;
}

.uploader {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uploader img {
  width: 100%;
  height: 100%;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
</style>
